<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>违章管理-列表</title>
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jquery.cookie.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../js/layer/layer.js"></script>
    <style>
        ul li {
            list-style: none;
            display: inline-block;
        }

        #page ul li {
            width: 40px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }

        table {
            width: 80%;
            margin: 0 auto;
        }

        th,
        td {
            border: 1px solid #FAEBD7;
            text-align: center;
        }

        tr:hover td {
            background-color: aliceblue;
            cursor: pointer;
        }

        #page {
            text-align: center;
        }
        #new input {
            width: 50px;
            height: 30px;
            line-height: 30px;
            background-color: #4476A7;
            color: #F8F8F8;
            border: 1px solid #4476A7;
            border-radius: 5px;
        }

        #new input:hover {
            background-color: #F0F8FF;
            color: #4476A7;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="body">
    <table>
        <thead>
        <tr>
            <th>编号</th>
            <th>违章车辆</th>
            <th>违章类型</th>
            <th>违章地点</th>
            <th>违章时间</th>
            <th>处罚信息</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<div id="page">
    <ul></ul>
</div>
</body>
<script>
    $(function () {
        toPage(1);
    })

    function ts() {
        var id = $(this).attr("data-id");
        var flag = $(this).attr("data-flag");

        $.ajax({
            url: baseUrl + "violation/ts.json",
            contentType: "json",
            data: {
                id: id,
                flag: flag
            },
            success: function (data) {
                if (data.code == "200") {
                    layer.msg('已更改', {icon: 1});
                    toPage(1);
                } else {
                    layer.msg('失败', {icon: 5});
                }

            }
        });
    }

    //撤销违章
    function del() {
        // alert($(this).attr("data-id"));
        var id = $(this).attr("data-id");
        layer.confirm('是否要撤销此违章？', {
            btn: ['确定撤销', '再想想'] //按钮
        }, function () {
            //删除
            $.ajax({
                url: baseUrl + "violation/del.json",
                contentType: "json",
                data: {
                    id: id
                },
                success: function (data) {
                    if (data.code == "200") {
                        layer.msg('已撤销', {icon: 1});
                        toPage(1);
                    } else {
                        layer.msg('撤销失败', {icon: 5});
                    }

                }
            });


        });
    }

    function toPage(page) {

        $.ajax({
            url: baseUrl + "violation/list.json",
            contentType: "json",
            data: {
                page: page
            },
            success: function (data) {
                if (data.code == "200") {
                    //1:创建表格
                    createTable(data.pageInfo.list);
                    //2:创建页码
                    createPageInfo(data.pageInfo);
                }

            }
        })
    }

    function createTable(result) {
        $("#body table tbody").empty();
        var tbody = $("#body table tbody");
        $.each(result, function (index, violation) {
            var idTd = $("<td></td>").append(violation.id);
            var carNoTd = $("<td></td>").append(violation.carNo);
            var violationTypeTd = $("<td></td>").append(violation.violationType);
            var violationLocationTd = $("<td></td>").append(violation.violationLocation);
            var violationDateTd = $("<td></td>").append(violation.violationDate);
            var violationInfoTd = $("<td></td>").append(violation.violationInfo);
            var tsTd = $("<td></td>");
            if (violation.flag === 0) {
                tsTd.append("未处理");
            } else if (violation.flag === 1) {
                tsTd.append("未缴费");
            } else if (violation.flag === 2) {
                tsTd.append("处理完毕");
            } else if (violation.flag === -1) {
                tsTd.append("未确认");
            }


            var delBtn = $("<a></a>").attr("href", "#").attr("data-id", violation.id).append("撤消违章");
            delBtn.on("click", del);

            var updateBtn = $("<a></a>").attr("href", "#").attr("data-id", violation.id).attr("data-flag", violation.flag);
            if (violation.flag === -1) {
                updateBtn.attr("data-flag", 0).append("违章确认");
            }
            updateBtn.on("click", ts);


            var optTd = $("<td></td>").append(delBtn).append("&nbsp;&nbsp;").append(updateBtn);
            $("<tr></tr>").append(idTd).append(carNoTd).append(violationTypeTd).append(violationLocationTd).append(violationDateTd).append(violationInfoTd).append(tsTd).append(optTd).appendTo(tbody);
        });
    }
</script>
</html>